import { Form, useLoaderData, useSubmit } from 'react-router-dom'
import styles from './style.module.less'

export function Content () {
  const submit = useSubmit()
  const data = useLoaderData() as IContent

  return (
    <Form method='PUT'>
      {/* 文本片段编辑区域 */}
      <main className={styles.container} key={data.id}>
        <input
          name="title"
          defaultValue={data.title}
          autoFocus
          onChange={(e) => {
            submit(e.target.form)
          }}
        />
        <textarea
          name="content"
          defaultValue={data.content}
          onChange={(e) => {
            submit(e.target.form)
          }}
        />
      </main>
    </Form>
  )
}
